<template>
    <div>
        <div class="container">
            <n-button type="info" @click="back" style="position:relative;top:15px">返回</n-button>
            <!-- 标题 -->
            <n-h1>{{blogInfo.title}}</n-h1>
            <!-- 文章内容 -->
            <div class="blog-content">
                <div v-html="blogInfo.content"></div>
            </div>
        </div>
        <n-back-top :right="100" />
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from "vue"
import { useRouter, useRoute } from "vue-router";
import MarkdownIt from "markdown-it"
const axios = inject("axios")
const router = useRouter()
const route = useRoute()
const blogInfo = ref({})
const mdHtml = ref("")
onMounted(() => {
    getBlog()
})

const getBlog = async () => {
    let res = await axios.get(`/blog/detail?id=${route.query.id}`)
    if (res.data.code == 200){
        blogInfo.value = res.data.rows[0]
    }
}
const back = () => {
    router.push("/")
}
</script>

<style>


.blog-content img {
    max-width: 100% !important;
}
</style>

<style lang="scss" scoped>

.container{
    width: 1200px;
    margin: 0 auto;
}

</style>